<?php

use yii\helpers\Html;
use kartik\grid\GridView;
use common\helpers\StringHelper;
use common\widgets\ueditor\Ueditor;
use backend\assets\AppAsset;
use johnitvn\ajaxcrud\CrudAsset;
use yii\bootstrap\Modal;

$this->title = 'News';
CrudAsset::register($this);
?>
<style type="text/css">
    #content-div{background-color: white;padding-top: 20px;padding-bottom: 20px;}
    .wrap { width: 80%;  height: 500px;  margin: auto;  padding-top: 20px;  overflow: auto;  overflow-x: hidden;  position: relative;  }
    .action { width: 200px;  margin: auto;  padding-top: 20px;  }
    .wrap ul { padding: 0;  margin: 0;  }
    .wrap li { padding: 10px; border-bottom: 1px solid #ccc;  font: 14px/1.5 "微软雅黑";  list-style: none;  cursor: move;  }
    .wrap li:hover { background-color: #f6f6f6;  }
    .wrap div[contenteditable] { border: 1px solid #ececec;  }
    .wrap img { display: block;  width: 100px;  }
    @media all and (max-width: 767px) {  .wrap { width: 300px;  }  img {  width: 200px;  }  }
</style>
<link rel="stylesheet" href="/js/jquery-ui/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="/js/jquery-ui/style.css">
<script src="/js/ddsort/ddsort.js" ></script>
<div class="blog-index">
    <p class="text-right">
        <?= Html::a('新建', ['create-banner'], ['class' => 'btn btn-success']) ?>
    </p>
    <!--选项卡开始-->
    <?php
    echo \yii\bootstrap\Tabs::widget([
        'items' => [
            [
                'label' => '已发布',
                'url' => '/newsnom/banner?active=published',
                'active' => $active == 'all' ? true : false
            ],
            [
                'label' => '草稿',
                'url' => '/newsnom/banner?active=draft',
                'active' => $active == 'draft' ? true : false
            ],
            [
                'label' => '回收站',
                'url' => '/newsnom/banner?active=recycle',
                'active' => $active == 'recycle' ? true : false
            ],
        ],
    ]);
    ?>

    <div id="list">
        <div id="content-div">
            <div class="wrap">
                <ul>
                    <div style="height: 30px;padding-top: 10px;background-color: #ecf0f5;">
                        <div style="float: left;line-height: 12px;width: 10%;margin-left: 10px;text-align: center;">图片</div>
                        <div style="float: left;line-height: 12px;width: 35%;margin-left: 10px;text-align: center;">标题</div>
                        <div style="float: left;line-height: 12px;width: 20%;margin-left: 10px;text-align: center;">发布时间</div>
                        <div style="float: left;line-height: 12px;width: 10%;margin-left: 10px;text-align: center;">状态</div>
                        <div style="float: left;line-height: 12px;width: 10%;margin-left: 10px;text-align: center;">列表显示</div>
                        <div style="float: left;line-height: 12px;width: 5%;margin-left: 10px;text-align: center;">操作</div>
                        <div class="clearfix"></div>
                    </div>
                    <?php
                    foreach ( $banner as $item ) {
                        echo $this->render('/newsnom/_bannerone', ['item' => $item]);
                    }
                    ?>
                </ul>
            </div>
        </div>
        <div class="clearfix" id="enddiv"></div>
        <div class="footer-loadding load-more" style="display: none;"><img src="/images/loading.gif" /></div>
    </div>
</div>
<?php Modal::begin([
    "id" => "ajaxCrudModal",
    "options" => ["tabindex" => ""],
    "footer" => "",
]);
$js = <<<JS
    $('#ajaxCrudModal').on('hide.bs.modal', function () {
        $("video").remove();
    });

    $(document).on('click', '.save', function () {
        
        $.ajax({
            url: "/newsnom/add-new",
            type: "post",
            data: {'postid': $("#addnew-postid").val(),'dataid': $("#addnew-dataid").val()},
            success: function(ret) {
                $("#"+ret.dataid).after(ret.content);
                $(".close").click();
            }
        });
    });
JS;

$this->registerJs($js);

Modal::end();
?>
<script type="text/javascript">
    $('.wrap').DDSort({
        target: 'li',		// 示例而用，默认即 li，
        delay: 100,         // 延时处理，默认为 50 ms，防止手抖点击 A 链接无效
        floatStyle: {
            'border': '1px solid #ccc',
            'background-color': '#fff'
        },
        up: function (ret) {
            var postids = [];
            $(".wrap ul li").each(function (idx,obj) {
                var postid = $(this).data("id");
                postids[idx] = postid;

            });
            console.log(postids);

            $.ajax({
                url: "/newsnom/ajax-put-banner",
                type: "post",
                data: {'banner':postids},
                success: function (ret) {
                }
            });
        }
    });

    $(function () {
        $("body").delegate(".remove","click",function () {
            var id = $(this).data("id");
            $.ajax({
                url: "/newsnom/ajax-delete-banner",
                type: "post",
                data: {'bannerid':id},
                success: function (ret) {
                    $("#"+id).remove();
                }
            });
        });
    });
</script>